import * as React from 'react';
// import { watermark } from './watermark';

export default class WaterMark extends React.Component {
  constructor(props) {
    super(props);
    // this.state = {
    //   elementReac: '',
    // };
    this.container = null;
    this.imageObserver = null;
  }

  componentDidMount() {
    // this.getElementViewTop();
    this.backageImageMutationObserver();
    // watermark({ image: this.getwaterMarkLink() });
  }

  componentWillUnmount() {
    this.imageObserver && this.imageObserver.disconnect();
  }

  // getElementViewTop = () => {
  //   const element = document.querySelector('.commit-detail-bottom');
  //   const reac = element.getBoundingClientRect();
  //   this.setState({
  //     elementReac: reac,
  //   });
  // }

  backageImageMutationObserver = () => {
    // 选择需要观察变动的节点
    const targetNode = this.container;
    // 观察器的配置（需要观察什么变动）
    const config = { attributes: true, childList: true, subtree: true };
    // 当观察到变动时执行的回调函数
    const callback = (mutationsList) => {
      // Use traditional 'for loops' for IE 11
      for (const mutation of mutationsList) {
        if (mutation.type === 'attributes') {
          targetNode.style.backgroundImage = this.getwaterMarkLink();
          targetNode.style.position = 'relative';
          targetNode.style.zIndex = 98;
          targetNode.style.pointerEvents = 'auto';
        }
      }
    };
    // 创建一个观察器实例并传入回调函数
    this.imageObserver = new MutationObserver(callback);
    // 以上述配置开始观察目标节点
    targetNode && this.imageObserver.observe(targetNode, config);
  };

  getwaterMarkLink = () => {
    if (
      this.props.genWatermarkimage &&
      this.props.genWatermarkimage.contentType &&
      this.props.genWatermarkimage.waterMarkLink
    ) {
      return `url(data:image/png;base64,${this.props.genWatermarkimage.waterMarkLink})`;
    }
  };

  render() {
    // const { elementReac } = this.state;
    const style = {
      position: 'relative',
      pointerEvents: 'auto',
      backgroundRepeat: 'repeat',
      zIndex: 98,
      backgroundImage: this.getwaterMarkLink(),
      ...this.props.style,
    };
    return (
      <div
        ref={(el) => {
          this.container = el;
        }}
        id="_watermark_wm"
        style={style}
      >
        {this.props.children}
      </div>
    );
  }
}
